<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :title="title"
    :visible="visible"
    :width="1200"
    switchFullscreen
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <h2>基本信息：</h2>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="供应商名称">
              <!-- <a-input
                placeholder="请输入供应商名称"
                v-decorator="['supplier', { rules: [{ required: true, message: '请输入供应商名称' }] }]"
              />-->
              <a-select
                v-decorator="['supplier', { rules: [{ required: false, message: '请选择供应商名称' }] }]"
                placeholder="请选择供应商名称"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option
                  v-for="(value,key) in supplierList"
                  :key="key"
                  :value="key"
                >{{ value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="生产商名称">
              <!-- <a-input
                placeholder="请输入生产商名称"
                v-decorator="['manufacturer', { rules: [{ required: true, message: '请输入生产商名称' }] }]"
              />-->
              <a-select
                v-decorator="['manufacturer', { rules: [{ required: false, message: '请选择生产商名称' }] }]"
                placeholder="请选择生产商名称"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option
                  v-for="(value,key) in manufacturerList"
                  :key="key"
                  :value="key"
                >{{ value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车辆存放库房">
              <a-select
                v-decorator="['storeId', { rules: [{ required: false, message: '请选择车辆存放库房' }] }]"
                placeholder="请选择车辆存放库房"
                @select="selectStore"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option
                  v-for="(value,key) in storeName"
                  :key="key"
                  :value="storeId[key]"
                >{{ value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="保管员">
              <a-select
                v-decorator="['storekeeperId', { rules: [{ required: false, message: '请选择保管员' }] }]"
                placeholder="请选择保管员"
                @select="selectStore"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option
                  v-for="(value,key) in storekeeperName"
                  :key="key"
                  :value="storekeeperId[key]"
                >{{ value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>车辆信息：</h2>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车辆vin码">
              <a-input
                v-decorator="['vin', { rules: [{ required: true, message: '请输入车辆vin码', trigger: 'blur' },
                 {
                    message: '请输入正确的VIN码',
                    pattern: new RegExp(/^[A-HJ-NPR-Z\d]{17}$/)
                  }]
                }]"
                placeholder="请输入车辆vin码"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合格证号码">
              <a-input
                v-decorator="['certificateNo', { rules: [{ required: false, message: '请输入合格证号码' }] }]"
                placeholder="请输入合格证号码"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="品牌名称">
              <!-- <a-input
                placeholder="请输入品牌名称"
                v-decorator="['brand', { rules: [{ required: true, message: '请输入品牌名称' }] }]"
              />-->
              <a-select
                v-decorator="['brand', { rules: [{ required: true, message: '请输入品牌名称' }] }]"
                placeholder="请输入品牌名称"
                @change="changeBrand"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option
                  v-for="(value,key) in brandList"
                  :key="key"
                  :value="value"
                >{{ value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汽车车型">
              <!-- <a-input
                placeholder="请输入汽车车型"
                v-decorator="['carModel', { rules: [{ required: true, message: '请输入汽车车型' }] }]"
              />-->
              <a-select
                v-decorator="['carModel', { rules: [{ required: true, message: '请输入汽车车型' }] }]"
                :disabled="noChooseBrand"
                placeholder="请输入汽车车型"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option
                  v-for="(value,key) in carModel"
                  :key="key"
                  :value="value"
                >{{ value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车型配置">
              <a-input
                v-decorator="['carTypeConfiguration', { rules: [{ required: false, message: '请输入车型配置' }] }]"
                placeholder="请输入车型配置"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车辆类型">
              <!-- <a-input
                placeholder="请输入车辆类型"
                v-decorator="['powerType', { rules: [{ required: true, message: '请输入车辆类型' }] }]"
              />-->
              <a-select
                v-decorator="['powerType', { rules: [{ required: false, message: '请输入车辆类型' }] }]"
                :disabled="noChooseBrand"
                placeholder="请输入车辆类型"
              >
                <a-select-option value="新能源">新能源</a-select-option>
                <a-select-option value="传统车">传统车</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车辆燃料类型">
              <!-- <a-input
                placeholder="请输入车辆燃料类型"
                v-decorator="['fuelType', { rules: [{ required: true, message: '请输入车辆燃料类型' }] }]"
              />-->
              <a-select
                v-decorator="['fuelType', { rules: [{ required: false, message: '请输入车辆燃料类型' }] }]"
                :disabled="noChooseBrand"
                placeholder="请输入车辆燃料类型"
              >
                <a-select-option value="油">油</a-select-option>
                <a-select-option value="电">电</a-select-option>
                <a-select-option value="油/电">油/电</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车辆颜色">
              <!-- <a-input
                placeholder="请输入车辆颜色"
                v-decorator="['outsideColor', { rules: [{ required: true, message: '请输入车辆颜色' }] }]"
              />-->
              <a-select
                v-decorator="['outsideColor', { rules: [{ required: false, message: '请输入车辆颜色' }] }]"
                :disabled="noChooseBrand"
                placeholder="请输入车辆颜色"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option
                  v-for="(value,key) in colorList"
                  :key="key"
                  :value="value"
                >{{ value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内饰颜色">
              <!-- <a-input
                placeholder="请输入内饰颜色"
                v-decorator="['interiorColor', { rules: [{ required: true, message: '请输入内饰颜色' }] }]"
              />-->
              <a-select
                v-decorator="['interiorColor', { rules: [{ required: false, message: '请输入内饰颜色' }] }]"
                :disabled="noChooseBrand"
                placeholder="请输入内饰颜色"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option
                  v-for="(value,key) in inColorList"
                  :key="key"
                  :value="value"
                >{{ value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发动机型号">
              <a-input
                v-decorator="['engineModel', { rules: [{ required: false, message: '请输入发动机型号' }] }]"
                placeholder="请输入发动机型号"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车辆发动机号">
              <a-input
                v-decorator="['engineNo', { rules: [{ required: false, message: '请输入车辆发动机号' }] }]"
                placeholder="请输入车辆发动机号"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发动机排量">
              <a-input
                v-decorator="['displacement', { rules: [{ required: false, message: '请输入发动机排量' }] }]"
                placeholder="请输入发动机排量"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="变速箱型号">
              <a-input
                v-decorator="['gearbox', { rules: [{ required: false, message: '请输入变速箱型号' }] }]"
                placeholder="请输入变速箱型号"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车辆轮胎编号">
              <a-input
                v-decorator="['tireNo', { rules: [{ required: false, message: '请输入车辆轮胎编号' }] }]"
                placeholder="请输入车辆轮胎编号"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="核定载客量">
              <a-input
                v-decorator="['passengerCapacity', { rules: [{ required: false, message: '请输入核定载客量' }] }]"
                placeholder="请输入核定载客量"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="功率">
              <a-input
                v-decorator="['motorPower', { rules: [{ required: false, message: '请输入功率' }] }]"
                placeholder="请输入功率"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排放标准">
              <a-input
                v-decorator="['emissionStandards', { rules: [{ required: false, message: '请输入排放标准' }] }]"
                placeholder="请输入排放标准"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="轴距">
              <a-input
                v-decorator="['wheelbase', { rules: [{ required: false, message: '请输入轴距' }] }]"
                placeholder="请输入轴距"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="额定载质量">
              <a-input
                v-decorator="['loadQuality', { rules: [{ required: false, message: '请输入额定载质量' }] }]"
                placeholder="请输入额定载质量"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="动力蓄电池组编号">
              <a-input
                v-decorator="['batteryNo', { rules: [{ required: false, message: '请输入动力蓄电池组编号' }] }]"
                placeholder="请输入动力蓄电池组编号"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>上传图片：</h2>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车辆外观图片">
              <a-upload
                v-decorator="['appearanceImg', { rules: [{ required: false, message: '请添加车辆外观图片' }] }]"
                :action="importImgAction"
                :before-upload="beforeUpload"
                :data="picData"
                :headers="headers"
                :show-upload-list="false"
                class="avatar-uploader"
                enctype="multipart/form-data"
                list-type="picture-card"
                name="appearanceImg"
                @change="handleChange"
              >
                <img v-if="imageUrl" :src="imageUrl" alt="file"/>
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'"/>
                  <div class="ant-upload-text">上传照片</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="二维码图片">
              <a-upload
                v-decorator="['qrCodeImg', {}]"
                :action="importImgAction"
                :before-upload="beforeUpload"
                :data="picData"
                :headers="headers"
                :show-upload-list="false"
                class="avatar-uploader"
                enctype="multipart/form-data"
                list-type="picture-card"
                name="qrCodeImg"
                @change="handleChange2"
              >
                <img v-if="imageUrl2" :src="imageUrl2" alt="file"/>
                <div v-else>
                  <a-icon :type="loading2 ? 'loading' : 'plus'"/>
                  <div class="ant-upload-text">上传照片</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="铭牌图片">
              <a-upload
                v-decorator="['nameplateImg', {}]"
                :action="importImgAction"
                :before-upload="beforeUpload"
                :data="picData"
                :headers="headers"
                :show-upload-list="false"
                class="avatar-uploader"
                enctype="multipart/form-data"
                list-type="picture-card"
                name="nameplateImg"
                @change="handleChange3"
              >
                <img v-if="imageUrl3" :src="imageUrl3" alt="file"/>
                <div v-else>
                  <a-icon :type="loading3 ? 'loading' : 'plus'"/>
                  <div class="ant-upload-text">上传照片</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合格证图片">
              <a-upload
                v-decorator="['certificateImg', {}]"
                :action="importImgAction"
                :before-upload="beforeUpload"
                :data="picData"
                :headers="headers"
                :show-upload-list="false"
                class="avatar-uploader"
                enctype="multipart/form-data"
                list-type="picture-card"
                name="certificateImg"
                @change="handleChange4"
              >
                <img v-if="imageUrl4" :src="imageUrl4" alt="file"/>
                <div v-else>
                  <a-icon :type="loading4 ? 'loading' : 'plus'"/>
                  <div class="ant-upload-text">上传照片</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>随车手续：</h2>
        </a-row>
        <a-row>
          <a-col :sm="24" :xs="24">
            <a-checkbox-group v-model="checkboxgroupvalue" style="width: 100%;" @change="onChange">
              <a-row>
                <a-col v-for="(value,key) in shouxuList" :key="key" :span="6">
                  <a-checkbox :value="value">{{ value }}</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-col>
        </a-row>
        <a-row>
          <h2>原车装备：</h2>
        </a-row>
        <a-row>
          <a-col :sm="24" :xs="24">
            <a-checkbox-group
              v-model="checkboxgroupvalue2"
              style="width: 100%;"
              @change="onChange2"
            >
              <a-row>
                <a-col v-for="(value,key) in zhuangbeiList" :key="key" :span="6">
                  <a-checkbox :value="value">{{ value }}</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
import axios from 'axios'
import qs from 'qs'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mapGetters } from 'vuex'

export default {
  name: 'VehicleRegisterModel',
  data() {
    return {
      title: '交易信息',
      visible: false,
      model: {},
      noChooseBrand: true,
      loading: '',
      loading2: '',
      loading3: '',
      loading4: '',
      saleSource: [],
      SaleInfosLike: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      imageUrl: '',
      imageUrl2: '',
      imageUrl3: '',
      imageUrl4: '',
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/sale/cxmSaleCarInfo/addCarInfo',
        edit: '/sale/cxmSaleCarInfo/editCarInfo',
        imgAction: 'cxm/cxmCommonBusiness/uploadPlainText',
        getStoreId: '/sale/cxmSaleStoreInfo/queryStoreMap',
        getStorekeeperId: '/sale/cxmSaleStaffInfo/queryStaffMap',
        delete: '/sale/cxmSaleCarInfo/delete',
        brandList: '/sale/cxmSaleBaseInfo/queryByTypes',
        enterpriseList: '/sale/cxmSaleRelatedEnterprise/queryEnterpriseListByTypes',
        loadImg: 'cxm/cxmCommonBusiness/downloadPlainText'
      },
      showDing: false,
      showEnterpriseUscc: false,
      headers: '',
      picData: {},
      storeName: [],
      storeId: [],
      storekeeperName: [],
      storekeeperId: [],
      checkboxgroupvalue: [],
      checkboxgroupvalue2: [],
      brandList: [],
      brandListAll: [],
      colorList: [],
      carModel: [],
      carModelAll: [],
      inColorList: [],
      supplierList: {},
      manufacturerList: {},
      shouxuList: [],
      zhuangbeiList: [],
      appearanceImg: '',
      qrCodeImg: '',
      nameplateImg: '',
      certificateImg: ''
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token, 'Content-Type': 'application/x-www-form-urlencoded' }
    getAction(this.url.enterpriseList + '?enterpriseType=1,2').then((res) => {
      if (res.success) {
        console.log(res.result)
        for (let i = 0; i < res.result['1'].length; i++) {
          //this.supplierList.push(res.result['1'][i].name);
          this.supplierList[res.result['1'][i].id] = res.result['1'][i].name
        }
        for (let i = 0; i < res.result['2'].length; i++) {
          //this.manufacturerList.push(res.result['2'][i].name);
          this.manufacturerList[res.result['2'][i].id] = res.result['2'][i].name
        }
      }
    })
    getAction(this.url.getStoreId).then((res) => {
      if (res.success) {
        for (const key in res.result) {
          this.storeName.push(res.result[key])
          this.storeId.push(key)
        }
      }
    })
    getAction(this.url.getStorekeeperId).then((res) => {
      if (res.success) {
        for (const key in res.result) {
          this.storekeeperName.push(res.result[key])
          this.storekeeperId.push(key)
        }
      }
    })
    getAction(this.url.brandList + '?dataTypes=1,2,6,7,8,9').then((res) => {
      if (res.success) {
        console.log(res.result['1'])
        this.brandListAll = res.result['1']
        this.carModelAll = res.result['8']
        for (let i = 0; i < res.result['1'].length; i++) {
          this.brandList.push(res.result['1'][i].name)
        }
        for (let i = 0; i < res.result['2'].length; i++) {
          this.colorList.push(res.result['2'][i].name)
        }

        for (let i = 0; i < res.result['8'].length; i++) {
          this.carModel.push(res.result['8'][i].name)
        }
        for (let i = 0; i < res.result['9'].length; i++) {
          this.inColorList.push(res.result['9'][i].name)
        }

        for (let i = 0; i < res.result['6'].length; i++) {
          this.shouxuList.push(res.result['6'][i].name)
        }
        for (let i = 0; i < res.result['7'].length; i++) {
          this.zhuangbeiList.push(res.result['7'][i].name)
        }

        console.log(res.result['6'])
        console.log(res.result['7'])
      }
    })
  },
  computed: {
    importImgAction: function() {
      return `${process.env.VUE_APP_BASE_API}${this.url.imgAction}`
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    saleSelect(value) {
      console.log('saleSelect', value)
      for (let i = 0; i < this.SaleInfosLike.length; i++) {
        if (this.SaleInfosLike[i].salesName == value) {
          this.form.setFieldsValue({
            salesPhone: this.SaleInfosLike[i].salesPhone
          })
        }
      }
    },
    getBase64(img, callback) {
      const reader = new FileReader()
      reader.addEventListener('load', () => callback(reader.result))
      reader.readAsDataURL(img)
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('您只能上传jpg或png格式的文件')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片必须小于2MB')
      }
      return isJpgOrPng && isLt2M
    },
    handleChange(info) {
      console.log(info)
      if (info.file.status === 'uploading') {
        this.loading = true

        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        this.getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl
          this.loading = false
          let params = {
            'content': imageUrl,
            'name': info.file.name,
            'encodeType': 'base64'
          }
          axios.post(this.importImgAction, qs.stringify(params), {
            headers: this.headers
          }).then((res) => {
            if (res.data.success) {
              console.log(res.data.result)
              this.appearanceImg = res.data.result
            }
          })
        })
      }
    },
    handleChange2(info) {
      console.log(info)
      if (info.file.status === 'uploading') {
        this.loading2 = true

        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        this.getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl2 = imageUrl
          this.loading2 = false
          let params = {
            'content': imageUrl,
            'name': info.file.name,
            'encodeType': 'base64'
          }
          axios.post(this.importImgAction, qs.stringify(params), {
            headers: this.headers
          }).then((res) => {
            if (res.data.success) {
              console.log(res.data.result)
              this.qrCodeImg = res.data.result
            }
          })
        })
      }
    },
    handleChange3(info) {
      console.log(info)
      if (info.file.status === 'uploading') {
        this.loading3 = true

        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        this.getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl3 = imageUrl
          this.loading3 = false
          let params = {
            'content': imageUrl,
            'name': info.file.name,
            'encodeType': 'base64'
          }
          axios.post(this.importImgAction, qs.stringify(params), {
            headers: this.headers
          }).then((res) => {
            if (res.data.success) {
              console.log(res.data.result)
              this.nameplateImg = res.data.result
            }
          })
        })
      }
    },
    handleChange4(info) {
      console.log(info)
      if (info.file.status === 'uploading') {
        this.loading4 = true

        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        this.getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl4 = imageUrl
          this.loading4 = false
          let params = {
            'content': imageUrl,
            'name': info.file.name,
            'encodeType': 'base64'
          }
          axios.post(this.importImgAction, qs.stringify(params), {
            headers: this.headers
          }).then((res) => {
            if (res.data.success) {
              console.log(res.data.result)
              this.certificateImg = res.data.result
            }
          })
        })
      }
    },
    changeDepositNotes(val) {
      if (val == '不可退') {
        this.showDing = true
      } else {
        this.showDing = false
      }
    },
    add(record) {
      console.log(record)
      this.edit(record)
    },
    edit(record) {

      this.form.resetFields()
      this.imageUrl1 = null
      this.imageUrl2 = null
      this.imageUrl3 = null
      this.imageUrl4 = null
      this.model = Object.assign({}, record)
      console.log(this.model)
      this.visible = true
      this.$nextTick(() => {
        if (this.model.appearanceImg) {
          getAction(this.url.loadImg, { id: this.model.appearanceImg }).then((res) => {
            console.log(res)
            if (res.success) {
              this.imageUrl = res.result
            }
          })
        }
        if (this.model.qrCodeImg) {
          getAction(this.url.loadImg, { id: this.model.qrCodeImg }).then((res) => {
            console.log(res)
            if (res.success) {
              this.imageUrl2 = res.result
            }
          })
        }

        if (this.model.nameplateImg) {
          getAction(this.url.loadImg, { id: this.model.nameplateImg }).then((res) => {
            console.log(res)
            if (res.success) {
              this.imageUrl3 = res.result
            }
          })
        }

        if (this.model.certificateImg) {
          getAction(this.url.loadImg, { id: this.model.certificateImg }).then((res) => {
            console.log(res)
            if (res.success) {
              this.imageUrl4 = res.result
            }
          })
        }

        this.form.setFieldsValue({
          /* 基本信息： */
          supplier: this.model.supplier,
          manufacturer: this.model.manufacturer,
          storeId: this.model.storeId,
          storekeeperId: this.model.storekeeperId,
          /* 车辆信息： */
          vin: this.model.vin,
          certificateNo: this.model.certificateNo,
          brand: this.model.brand,
          carModel: this.model.carModel,
          carTypeConfiguration: this.model.carTypeConfiguration,
          powerType: this.model.powerType,
          fuelType: this.model.fuelType,
          outsideColor: this.model.outsideColor,
          interiorColor: this.model.interiorColor,
          engineModel: this.model.engineModel,
          engineNo: this.model.engineNo,
          displacement: this.model.displacement,
          gearbox: this.model.gearbox,
          tireNo: this.model.tireNo,
          passengerCapacity: this.model.passengerCapacity ? String(this.model.passengerCapacity) : null,
          motorPower: this.model.motorPower,
          emissionStandards: this.model.emissionStandards,
          wheelbase: this.model.wheelbase,
          loadQuality: this.model.loadQuality,
          batteryNo: this.model.batteryNo,
          /* 上传图片 ： */
          appearanceImg: this.model.appearanceImg,
          qrCodeImg: this.model.qrCodeImg,
          nameplateImg: this.model.nameplateImg,
          certificateImg: this.model.certificateImg
        })
        this.checkboxgroupvalue = this.model.accessoriesId ? this.model.accessoriesId.split(',') : null
        console.log(this.checkboxgroupvalue)
        this.checkboxgroupvalue2 = this.model.originalEquipmentId ? this.model.originalEquipmentId.split(',') : null
        console.log(this.checkboxgroupvalue2)
      })
    },
    close() {
      this.$emit('close')
      this.imageUrl = null
      this.imageUrl1 = null
      this.imageUrl2 = null
      this.imageUrl3 = null
      this.imageUrl4 = null
      this.appearanceImg = null
      this.qrCodeImg = null
      this.nameplateImg = null
      this.certificateImg = null
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {

        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'post'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化
          /* formData.orderDate = formData.orderDate ? formData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null */
          //formData.shouxuList = this.checkboxgroupvalue;
          if (this.checkboxgroupvalue) {
            formData.accessoriesId = this.checkboxgroupvalue.join(',')
          }
          //formData.zhuangbeiList = this.checkboxgroupvalue2;
          if (this.checkboxgroupvalue2) {
            formData.originalEquipmentId = this.checkboxgroupvalue2.join(',')
          }
          if (this.appearanceImg) {
            formData.appearanceImg = this.appearanceImg
          }
          if (this.qrCodeImg) {
            formData.qrCodeImg = this.qrCodeImg
          }
          if (this.nameplateImg) {
            formData.nameplateImg = this.nameplateImg
          }
          if (this.certificateImg) {
            formData.certificateImg = this.certificateImg
          }
          if (formData.passengerCapacity) {
            formData.passengerCapacity = Number(formData.passengerCapacity)
          }
          httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              this.noChooseBrand = true
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    selectStore(a) {
      console.log(a)
    },
    onChange(checkedValues) {
      console.log('checked = ', checkedValues)
      console.log('value = ', this.value)
    },
    onChange2(checkedValues) {
      console.log('checked = ', checkedValues)
      console.log('value = ', this.value)
    },
    changeBrand(value) {
      this.carModel = []
      this.form.setFieldsValue({
        'carModel': []
      })
      this.noChooseBrand = false
      for (let i = 0; i < this.brandListAll.length; i++) {
        if (this.brandListAll[i].name == value) {
          for (let j = 0; j < this.carModelAll.length; j++) {
            if (this.carModelAll[j].parentId == this.brandListAll[i].id) {
              this.carModel.push(this.carModelAll[j].name)
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-upload-select-picture-card img {
  width: 128px;
  height: 128px;
}
</style>